<template>
  <div class="about-us">
    <!-- 最上面标题 -->
    <div class="swiper-title">关于我们</div>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="please">请填写关于我们</div>
      <!-- 富文本的区域 -->
      <div class="editor">
        <div>内容详情：</div>
        <div class="wang">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 300px; overflow-y: hidden"
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>
        </div>
      </div>
      <!-- 保存按钮 -->
      <div style="text-align: center">
        <el-button class="save-btn" type="primary" @click="save">
          <img
            style="width: 16px; height: 16px"
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u710.png"
            alt=""
          />
          <span style="margin-left: 5px">保存</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import axios from "../utils/http";
import { ElButton } from "element-plus";

// 渲染
let getData = function () {
  axios({
    url: "/setUp/aboutUs/list",
    method: "get",
    params: {
      id: 1,
    },
  }).then(({ data }) => {
    console.log("2333", data);
    if (data.code == 0) {
      valueHtml.value = data.data.aboutUs;
    }
  });
};
// const editor=Editor()
// const text = editor.getText()

function repalceHtml(str) {
  str = str.replace(/<[^>]+>|&[^>]+;/g, "").trim(); //去掉所有的html标签和&nbsp;之类的特殊符合
  return str;
}

// 保存
let save = function () {
  console.log(repalceHtml(valueHtml.value));
  axios({
    url: "/update",
    method: "post",
    params: {
      aboutUs: repalceHtml(valueHtml.value),
      id: 1,
    },
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      getData();
    }
  });
};

onMounted(() => {
  getData();
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
let valueHtml = ref("");

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

<style lang="less" scoped>
// 最外层
.about-us {
  min-width: 1095px - 60px;
  padding: 20px 30px;
}
// 标题
.swiper-title {
  font-size: 24px;
  width: 1100px;
  height: 50px;
  font-weight: bold;
  color: #9137f3;
}
// 主要内容区域
.main-content {
  width: 1100px - 60px;
  background-color: white;
  border: 1px solid #e4e4e4;
  height: 503px;
  padding: 0 30px;

  .please {
    width: 1100px - 60px;
    height: 50px;
    color: #909090;
    font-size: 14px;
    line-height: 50px;
    border-bottom: 1px solid #f2f2f2;
  }
  .save-btn {
    background-color: #9137f3;
    border: 1px solid #9137f3;
    color: white;
  }
}
// 富文本
.editor {
  display: flex;
  margin-left: 50px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.wang {
  width: 805px;
  height: 380px;
  // background-color: aquamarine;
}
</style>
